﻿@model DataAccess.Datatypes.Good

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_SiteGoodLayout.cshtml"; 
}
  
<div style="width: 45%; float:left; position:relative; top: 60px; margin-left: 60px;">    
    @if (Request.IsAuthenticated && User.Identity.Name == Model.UserName)
    {
    <div>
        <p class="blue-font not-transform-text">
            @Html.ActionLink("Edit", "Edit", (string)ViewBag.Name, new { id = Model.Id }, null) |
            @Html.ActionLink("My Stuff", "MyStuff", (string)ViewBag.Name)
        </p>
    </div>
    } 
    <table style="margin:0">
        <tr>
            <td>
                <img style="border: 1px solid #aeaeae;" src="@Url.Action("GetImageGood", "HomeSite", new { goodId = Model.Id })" />
            </td>
        </tr>
        <tr>
            <td>
                @if (Request.IsAuthenticated)
                {
                    if (Model.UserLikes)
                    {
                        <a href="@Url.Action("RemoveLike", (string)ViewBag.Name, new { goodId = Model.Id })">
                            <img src="~/Images/Like_color.png" style=" height: 40px" />
                            You and @Html.DisplayFor(model => model.Likes) users like this!
                        </a>
                    }
                    else
                    {
                        <a href="@Url.Action("AddLike", (string)ViewBag.Name, new { goodId = Model.Id })">
                            <img src="~/Images/Like_grey.png" style=" height: 40px" />
                            @Html.DisplayFor(model => model.Likes) users like this!
                        </a>
                    }
                }
            </td>
        </tr>
    </table>
    <table style="margin:0">
        <tr>
            <td><h4>@Html.DisplayFor(model => model.Name)</h4></td>
        </tr>
        <tr>
            <td><b>@Html.DisplayName("Price"):</b></td>
            <td> @Html.DisplayFor(model => model.PriceDay)</td>
        </tr>
    @foreach (var item in Model.GoodAttributes)
    {
        <tr>
            <td><b>@Html.DisplayFor(modelItem => item.Name):</b></td>
            <td>@Html.DisplayFor(modelItem => item.Value)</td>
        </tr>
    }
    </table>               
    @if (Request.IsAuthenticated)
    {
    <div class="comments" style="margin-top: 20px; width:auto; position:relative; display:block;">
        @Html.Partial("_ContentForm") 
    </div>  
    }  
    <div id="Content" style="margin-top: 10px;">                    
        <fieldset>
            <legend hidden="hidden">Content</legend>
            @foreach (var item in Model.Contents)
            {
                <div class="display-label" style="margin-top: 20px;">
                    <table style="width: 100%; margin-left: 0;">
                        <tr>
                            <td class="blue-font" style="text-align: left; ">                                
                                >>
                                @Html.DisplayFor(modelItem => item.UserName)
                                said at
                                @Html.DisplayFor(modelItem => item.Date)                                
                            </td>
                            <td style="text-align: left;">
                                @if (Request.IsAuthenticated)
                                {
                                    <a href="@Url.Action("AddInap", (string)ViewBag.Name, new { contentId = item.id })">
                                        <img src="~/Images/innapropiate.png"/>
                                    </a>
                                }
                            </td>
                        </tr>
                    </table>
                </div>
                if (item.IsYouTubeUrl())
                {
                <div style="margin-top: 5px;">
                        @Helpers.Youtube(item.Url)
                </div>
                }
                else
                {
                <div style="margin-top: 5px;">
                    @Html.DisplayFor(modelItem => item.Url)
                </div>
                }
                
                <div class="display-field" style="margin-top: 10px;">
                    @Html.DisplayFor(modelItem => item.Comment)
                </div>
                if (Request.IsAuthenticated && !item.UserInapp)
                {
                    @*@Html.Action("Is this inappropriate?", "Index", "Home")*@
                }
            }
        </fieldset>
    
    </div>        
</div>
<div style="width: 45%; float:right; position:relative; top: 60px;">
    <div id="map_canvas" style="width: auto; height: 250px; position:relative; display:block; background: #eee; border: 1px solid #e3e3e3;"></div>

    <link href="~/Content/bootstrap_calendar.css" rel="stylesheet" />
    <link href="~/Content/calendar.css" rel="stylesheet" />
    <div style="width: auto; height: 250px; position:relative; display:block; margin-top: 20px;">
        <h4 class="blue-font not-transform-text">Check Availability</h4>
		<div class="row-fluid" style="max-width: 300px; max-height: 300px; float:left;">
			<div class="span4" style="width:auto; height: 100%;">
			    <div class="calendar_test"></div>
			    <br/><br/>
			</div>
		</div>
        <div class="rent" style="float:left; margin-top: -30px;">            
            @if (ViewBag.Error)
            {
                <h4 class="errorMessage">Error: Selected time period is not available or is invalid.</h4>
            }
            @Html.Partial("_PayPalButton")                        
        </div>
	</div>    
    <script type="text/javascript">
        var notAvailable = @(Html.Raw(Json.Encode(Model.Id)))
    </script>    
    <script type="text/javascript">
        var goodId = @(Html.Raw(Json.Encode(Model.Id)))
    </script>
    <script src="~/Scripts/knockout-2.2.1.js"></script>     
</div>

@section scripts {
    <script src="~/Scripts/jquery.signalR-1.1.2.js"></script>
    <script src="~/signalr/hubs"></script>
    <script src="~/ViewModel/GoodsVM.js"></script>
    <script src="~/Scripts/bootstrap_calendar.js"></script>
    <script type="text/javascript">
        events = [
                    [
                        "27/6/2013", 
                        '', 
                        '', 
                        'blue'
                    ]
                    ,
                    [
                        "8/6/2013", 
                        'bootstrap logo popover!', 
                        '#', 
                        '#51a351', 
                        '<img src="http://bit.ly/XRpKAE" />'
                    ]
                    ,
                    [
                        "17/6/2013",
                        'octocat!', 
                        'https://github.com/logos', 
                        'red', 
                        'new github logo <img src="http://git.io/Xmayvg" />'
                    ]
        ];                        
	</script>
    <script type="text/javascript">
        function CrearMapa() {
            var mapOptions = {
                center: new google.maps.LatLng(@Model.Latitude.ToString().Replace(",", ".") , @Model.Longitude.ToString().Replace(",", ".")),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            var dr = new google.maps.Marker({
                position: new google.maps.LatLng(@Model.Latitude.ToString().Replace(",", ".") , @Model.Longitude.ToString().Replace(",", ".")),
            map: map, 
            draggable: false
            });
    }

    window.onload = function () {
        CrearMapa();
        new JsDatePick({
            useMode: 2,
            target: "checkin",
            dateFormat: "%d-%M-%Y"
        });
        new JsDatePick({
            useMode: 2,
            target: "checkout",
            dateFormat: "%d-%M-%Y"
        });                    
    };
        
    $("document").ready(function () {
        $("#urlDiv").hide();
        $("#btnShowUrl").click(function () {
            $("#btnShowUrl").hide("fast").ready(function () {
                $("#urlDiv").show("fast");
            });
        });

        $("#btnHideUrl").click(function () {
            $("#urlDiv").hide("fast").ready(function () {
                $("#btnShowUrl").show("fast").ready(function () {
                    $("#newUrl").val("");
                });
            });
        });
    });   
                  
</script>
}